<template>
    <div class="novel-box">
        <div class="header-show" v-show="isShow">
            <i class="show-back" @click="$router.go(-1)"></i>
            <i class="show-detail"></i>
        </div>
        <div class="box" :style="`background:${background}; color:${color}; font-size:${size}px;`">
            <div class="header-box">
                <button @click="$router.go(-1)">返回目录</button>
            </div>
            <div class="novel-content" @click="isShow = !isShow" v-if="content.length > 0" v-html="content"></div>
            <div class="noshow" v-else>正在加载...</div>
            <div class="footer">
                <a href="#" class="next" @click="last">上一章</a>
                <button class="ml" @click="backml">目录</button>
                <a href="#" class="next" @click="next">下一章</a>
            </div>
        </div>
        <div class="footer-show" v-show="isShow">
            <div class="size">
                <p>字体大小</p>
                <button
                    @click="
                        if (size > 12) {
                            size--;
                        }
                    "
                >
                    -A
                </button>
                <button
                    @click="
                        if (size < 24) {
                            size++;
                        }
                    "
                >
                    +A
                </button>
            </div>
            <div class="mode" :style="`background:${modBack};color:${background};`" @click="mod">{{ modValue }}模式</div>
        </div>
    </div>
</template>

<script>
import { bookContent, bookInfo } from "@/api/found";
export default {
    data() {
        return {
            content: "",
            index: 0,
            infolist: [],
            source_uuid: "",
            content_uuid: "",
            color: "#000",
            background: "#f0f0f0",
            modValue: "夜间",
            modBack: "#656565",
            size: 16,
            isMode: false,
            isShow: false,
        };
    },
    methods: {
        getInfo() {
            let data = {
                source_uuid: this.$route.query.source_uuid,
            };
            bookInfo({ data }).then((res) => {
                // console.log(res);
                let result = res.data.catalog;
                this.infolist = result;
                // console.log("infolist==>", this.infolist);
            });
        },
        getNovelContent() {
            this.index = this.$route.query.content_index;
            this.source_uuid = this.$route.query.source_uuid;
            this.content_uuid = this.$route.query.content_uuid;
            let data = {
                source_uuid: this.source_uuid,
                content_uuid: this.content_uuid,
            };
            bookContent({ data }).then((res) => {
                this.content = res.data.content;
                // console.log(this.content);
            });
        },
        backml() {
            this.$router.push({
                path: "/detaillist",
            });
        },
        next() {
            this.index++;
            this.content_uuid = this.infolist[this.index].uuid;
            // console.log(this.source_uuid, this.content_uuid);
            let data = {
                source_uuid: this.source_uuid,
                content_uuid: this.content_uuid,
            };
            this.content = "";
            bookContent({ data }).then((res) => {
                this.content = res.data.content;
                // console.log(this.content);
            });
        },
        last() {
            if (this.index > 0) {
                this.index--;
                this.content_uuid = this.infolist[this.index].uuid;
                let data = {
                    source_uuid: this.source_uuid,
                    content_uuid: this.content_uuid,
                };
                this.content = "";
                bookContent({ data }).then((res) => {
                    this.content = res.data.content;
                    // console.log(this.content);
                });
            } else {
                alert("前面没有章节了");
            }
        },
        mod() {
            this.isMode = !this.isMode;
            if (this.isMode) {
                this.background = "#313131";
                this.color = "#fff";
                this.modValue = "日间";
                this.modBack = "#f0f0f0";
            } else {
                this.background = "#f0f0f0";
                this.color = "#000";
                this.modValue = "夜间";
                this.modBack = "#656565";
            }
        },
    },
    // beforeRouteUpdate(to, from, next) {
    //     next();
    // },
    mounted() {
        this.getNovelContent();
        this.getInfo();
    },
};
</script>

<style lang="scss">
.novel-box {
    width: 100%;
    position: relative;

    .header-show {
        width: 100%;
        height: 50px;
        padding: 0 15px;
        position: fixed;
        top: 0;
        bottom: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .show-back {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url(@/assets/back.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .show-detail {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url(@/assets/dian.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }

    .footer-show {
        width: 100%;
        // height: 50px;
        padding: 20px 15px;
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .size {
            display: flex;
            p {
                color: #999;
                padding-right: 5px;
            }
            button {
                border: 0;
                border-radius: 20px;
                padding: 0px 15px;
                margin: 0 5px;
            }
        }
        .mode {
            padding: 0 10px;
            color: #fff;
            background: #656565;
            border-radius: 10px;
        }
    }

    .box {
        width: 100%;
        background: #f0f0f0;
        color: #000;
        font-size: 16px;
        .header-box {
            width: 100%;
            // background: #f0f0f0;
            padding: 5px 15px;
            button {
                border: 0;
                font-size: 12px;
                color: #999;
                background: 0;
            }
        }
        .novel-content {
            width: 100%;
            min-height: 620px;
            // background: #f0f0f0;
            padding-bottom: 20px;
            .g-book {
                padding-top: 20px;
                width: 100%;

                h1 {
                    text-align: center;
                    height: 50px;
                }

                p {
                    text-indent: 2em;
                    padding: 15px;
                    line-height: 30px;
                }
            }
        }
        .footer {
            width: 100%;
            background: #f0f0f0;
            display: flex;
            // padding-bottom: 20px;
            a,
            button {
                // border: 0;
                text-align: center;
                border-top: 1px solid #999;
                border-bottom: 1px solid #999;
                padding: 10px 0;
                width: 33.3%;
            }
            .ml {
                border-left: 1px solid #999;
                border-right: 1px solid #999;
                background: #999;
            }
            .next {
                background: #fff;
            }
        }
        .noshow {
            width: 100%;
            height: 620px;
            line-height: 500px;
            // background: #f0f0f0;
            text-align: center;
            // color: #313131;
            // font-size: 20px;
        }
    }
}
</style>
